<script setup="">
import {defineEmits, onMounted, ref} from "vue"
import {timeAgo} from "@/util/time.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {adminDeleteBanner, adminDeleteTweet} from "@/request/mid_interface.js";
import NewOrEditTweet from "@/components/home/NewOrEditTweet.vue";
import NewOrEditBanner from "@/components/home/NewOrEditBanner.vue";

const emit = defineEmits([]);

/**
 *  {
 * 		"banner_id": 1,
 * 		"img": "https://mmbiz.qpic.cn/mmbiz_jpg/YicUhk5aAGtB2muOLP33Ncl5DwVmrJGELTiasjjJ9TzHaSncQBSicRSuykVLLIwbBHBgC0ibVbHibYicyiaMnMEdHZ8uA/0?wx_fmt=jpeg",
 * 		"weburl": "https://baidu.com",
 * 		"is_weburl": false,
 * 		"is_sticky": false,
 * 		"is_deleted": false,
 * 		"create_time": 1708166033,
 * 		"update_time": 1708166033
 *	}
 */

const editData = ref({})

let props = defineProps({
  param: {
    type: Object,
    required: true
  }
})

onMounted(() => {
  initEditData()
})

function initEditData() {
  editData.value = props.param
}

function getTimeAgo(timestamp) {
  return timeAgo(timestamp)
}

function refresh() {
  dialogVisible.value = false
  emit('refresh')
}

function deleteTweet() {
  ElMessageBox.confirm(
      '是否要删除此推文？该操作不可撤销',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await adminDeleteTweet({
          tweet_id: props.param.tweet_id
        })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        emit('refresh')
      })
      .catch(() => {
          }
      )
}

function deleteBanner() {
  ElMessageBox.confirm(
      '是否要删除此轮播图？该操作不可撤销',
      '请确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await adminDeleteBanner({
          banner_id: props.param.banner_id
        })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        emit('refresh')
      })
      .catch(() => {
          }
      )
}

function editBanner() {
  dialogVisible.value = true
}

function getRelativeTime(timestamp) {
  return getTimeAgo(timestamp)
}

const dialogVisible = ref(false)

function openUrl(url) {
  window.open(url, '_blank');
}
</script>

<template>
  <div class="w-full bg-white px-5 py-5 rounded-xl" style="">
    <el-dialog v-model="dialogVisible" width="800">
      <NewOrEditBanner @close="dialogVisible=false" @refresh="refresh" :param="param"></NewOrEditBanner>
    </el-dialog>
    <div class="flex flex-col">
      <div class="w-full flex">
        <el-image style="width: 384px; height: 194px" class="rounded flex-1" fit="cover" :src="param.img"
                  :preview-src-list="[param.img]"></el-image>
      </div>
      <div class="flex justify-between items-end mt-5">
        <div class="flex items-center">
          <img @click="deleteBanner" class="cursor-pointer" src="@/assets/img/tweet_card/delete.svg" alt="">
          <img @click="editBanner" class="ml-2.5 cursor-pointer" src="@/assets/img/tweet_card/edit.svg" alt="">
        </div>
        <div class="text-gray-400 min-w-20 text-right"><span
            style="color: var(--themeColor)">{{ param.is_sticky ? "已置顶 ·" : "" }}</span>
          {{ getRelativeTime(param.create_time * 1000) }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
